<template>
	<view class="bg">
		<view class="top">
			<view class="line">
				<img :src="logo" class="logo-img" />
				<text class="text">{{cardNumber}}</text>
			</view>
			<view class="line">
				<text class="label">交易金额</text>
				<text class="value"><text style="font-size: 20upx;">￥</text>{{order.price}}</text>
			</view>
		</view>
		<view class="body">
			<view class="line-info">
				<view class="label-info">订单号</view>
				<view class="value-info">{{orderId}}</view>
			</view>
			<view class="line-info">
				<view class="label-info">创建时间</view>
				<view class="value-info">{{order.insertTime}}</view>
			</view>
			<view class="line-info">
				<view class="label-info">订单状态</view>
				<view class="value-info">{{order.dictStatusName}}</view>
			</view>
			<view class="line-info">
				<view class="label-info">付款通道</view>
				<view class="value-info">{{order.dictPayTunnelName}}</view>
			</view>
			<view class="line-info">
				<view class="label-info">付款用户昵称</view>
				<view class="value-info">{{order.nickName}}</view>
			</view>
			<view class="line-info">
				<view class="label-info">购买数量</view>
				<view class="value-info">{{order.amount}}</view>
			</view>
			<view class="line-info">
				<view class="label-info">生效时间</view>
				<view class="value-info">{{order.dictIsPreStorage}}</view>
			</view>
			<view class="line-info">
				<view class="label-info">备注</view>
				<view class="value-info">{{order.remark}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				orderId: '',
				cardId: '',
				cardNumber: '',
				cardOperator: '',
				logo: '',
			}
		},
		onLoad(option) {
			if (typeof WeixinJSBridge == "object" && typeof WeixinJSBridge.invoke == "function") {
				WeixinJSBridge.invoke('setFontSizeCallback', {
					'fontSize': 0
				});
				// 重写设置网页字体大小的事件
				WeixinJSBridge.on('menu:setfont', function() {
					WeixinJSBridge.invoke('setFontSizeCallback', {
						'fontSize': 0
					});
				});

			};
			this.orderId = option.orderId;
			this.cardId = option.cardId;
			this.cardNumber = option.cardNumber;
			this.initData();
		},
		methods: {
			async initData() {
				let obj = await this.$req.userData('/customer-order/getDetail', {
					id: this.orderId
				})
				if (obj._result) {
					if(obj.data.dictCardOperator == 'CARDTELECOM') {
						this.logo = '../../../static/img/dianxin.svg';
					} else if (obj.data.dictCardOperator == 'CARDMOBILE') {
						this.logo = '../../../static/img/yidong.svg';
					} else if (obj.data.dictCardOperator == 'CARDUNICOM') {
						this.logo = '../../../static/img/liantong.svg';
					}
					this.order = {
						dictIsPreStorage: obj.data.dictIsPreStorage == "YES" ? '次月生效' : '本月生效',
						price: obj.data.price?obj.data.price.toFixed(2):0.00,
						dictPayTunnelName: obj.data.dictPayTunnelName?obj.data.dictPayTunnelName:'--',
						dictStatusName: obj.data.dictStatusName?obj.data.dictStatusName:'--',
						insertTime: obj.data.insertTime?obj.data.insertTime:'--',
						nickName: obj.data.nickName?obj.data.nickName:'--',
						amount: obj.data.amount?obj.data.amount:'--',
						remark: obj.data.remark?obj.data.remark:'--',
					}
				}


			}
		}
	}
</script>

<style>
	.bg {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		background-image: linear-gradient(120deg, #fdfbfb 0%, #ebedee 100%);
	}

	.top {
		width: 90%;
		height: auto;
		position: relative;
		top: 0;
		left: 0;
		padding: 20upx 5%;
		background-image: linear-gradient(to top, #fdfbfb 0%, white 100%);
	}
	

	.line {
		width: 100%;
		height: 100upx;
		position: relative;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	
	.logo-img {
		width: 25%;
		height: auto;
	}

	.text {
		width: 70%;
		height: auto;
		font-size: 28upx;
		color: #333;
		text-align: right;
		letter-spacing: 1px;
		font-weight: 700;
	}
	.label{
		width: 25%;
		height: auto;
		font-size: 30upx;
		color: #333;
	}
	.value{
		width: 70%;
		height: auto;
		font-size: 30upx;
		color: #777;
		text-align: right;
		letter-spacing: 1px;
		font-weight: 500;
	}
	.body {
		width: 90%;
		height: auto;
		position: relative;
		top: 0;
		left: 0;
		padding: 20upx 5%;
		background-image: linear-gradient(to top, #fdfbfb 0%, white 100%);
		margin-top: 20upx;
	}
	.line-info {
		width: 100%;
		height: 70upx;
		position: relative;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.label-info{
		width: 30%;
		height: auto;
		position: relative;
		font-size: 28upx;
		color: #333;
	}
	.value-info{
		width: 65%;
		height: auto;
		position: relative;
		font-size: 28upx;
		color: #777;
		text-align: right;
	}
</style>
